<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="author" content="xsl">
    <script src="jquery-3.1.1.js"></script>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }  
        body{
            height: 1800px;
        }
        .zhe{
            width: 100%;
            height: 1850px;
            background-color: #888;
            /*opacity: 0.6;*/
            top: 0;
            left: 0;
            display: none;
        }
        
        .box {
            width: 350px;
            height: 200px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            align-content: space-around;
            position: absolute;
            cursor: pointer;
            box-sizing: border-box;
        }
        
        h1 {
            width: 200px;
            font-size: 20px;
            text-align: center;
        }
        
        input[type=text] {
            margin-top: 5px;
            width: 200px;
            height: 30px;
            border: 1px solid #000;
            color: #666;
        }
        
        from {
            width: 350px;
        }
        
        input[type=button] {
            width: 200px;
            height: 30px;
        }
        
        span{
            position: relative;
            right: -50px;
            top: 0px;
            cursor: pointer;
        }
        
        button {
            width: 100px;
            height: 50px;
            position: absolute;
            color: purple;
            font-size: 20px;
            background-color: wheat;
            border: none;
            margin-left: calc((100% - 100px) / 2);
            box-shadow: 0 0 5px green;
            top: 1750px;
        }
    </style>
</head>

<body>
    <div class="zhe">
        <div class="box">
            <h1>用户登录</h1>
            <span>X</span>
            <form>
                <label>账号:</label>
                <input type="text" value="请输入用户名"><br>
                <!--</from>
                <from>-->
                <label for="password">密码:</label>
                <input type="text" value="请输入密码" name="password">
            </form>
            <input type="button" value="登录">
        </div>
    </div>
    <button type="button">点我啊</button>
</body>

</html>
<script>
   // 遮罩层的大小始终是100%
   setOverlayWH();   
   function setOverlayWH(){
    // 整个页面的大小  可视页面的大小+滚动条的大小
    var w = $(document).width()
    var h = $(document).height()
    var w = $(window).width()+$(document).scrollLeft();
    var h = $(window).height()+$(document).scrollTop();

    $('.zhe').width(w).height(h);
   }
   setAlertCenter();
   // 弹窗第一次出现居中,当游览器窗口发生变化时也要居中
   function setAlertCenter(){
      
       var left = ($(window).width()-$('.box').width())/2 +$(document).scrollLeft()
       // top =(可视页面的高度-元素本身的高度)/2+滚动条的垂直高度 
       var top = ($(window).height()-$('.box').height())/2 + $(document).scrollTop();
       $('.box').css({left:left,top:top})
   }    
   // 当页面发生滚动时,重新计算尺寸
   $(window).resize(function(){
       setOverlayWH();
    //    setAlertCenter();
   });
   $(window).scroll(function(){
       setOverlayWH();
       setAlertCenter();
   })
   
//    弹出
   $('button').click(function(){
       $('.zhe').show();
       $('.box').show();
       setAlertCenter()
    //   禁用滚动条
    $('html').css('overflow','hidden')
    $('body').css('overflow','hidden')
   });
//    关闭
$('.box span').click(function(){
    $('.zhe').hide()
    $('.box').hide()
    // 使用滚动条
    $('html').css('overflow','auto')
    $('body').css('overflow','auto')
})
// 让弹窗移动
$('.box h1').mousedown(function(e){
    $(document).mousemove(function(ev){
        console.dir(ev);
        var y = ev.pageY - e.offsetY
        var x = ev.pageX - e.offsetX
        // 左右不能越界
        x<0?x=0:x>$(window).width()-400?x=$(window).width()-400:x
        // 上下约束(考虑滚动条)
        y<$(document).scrollTop()?y=$(document).scrollTop():y>$(document).height()-200?y=$(document).height()-200:y
        $('#alert').css({top:y,left:x})
       $('.box').css({top:y,left:x})
    })
})
// 松开鼠标,取消移动
$('.box h1').mouseup(function(){
    $(document).unbind();
})
// 离开窗口,清除移动
$(document).mouseout(function(){
    $(document).unbind()
})
</script>